<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- 设置字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置页面在不同设备上的响应式布局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置页面标题 -->
    <title>主页面</title>
    <!-- 引入 user_main.css 样式文件 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='user_main.css') }}">
    <!-- 引入 styles.css 样式文件 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>

<body>
    <!-- 判断用户是否已登录 -->
    {% if current_user.is_authenticated %}
    <div class="user-info">
        <!-- 显示欢迎信息，包含当前用户的用户名 -->
        <span class="welcome-text">欢迎，{{ current_user.username }}</span>
        <!-- 退出登录按钮，点击后跳转到退出登录的路由 -->
        <a href="{{ url_for('logout') }}" class="logout-button">退出登录</a>
    </div>
    {% endif %}

    <!-- 主容器，包含小朋友营养建议和知识信息 -->
    <div class="main-container">
        <!-- 主标题，显示页面主题 -->
        <h1>小朋友营养建议与知识</h1>
        <!-- 遍历每个小朋友的信息和对应的知识 -->
        {% for child, knowledge_list in paired_info %}
        <div class="child-card">
            <div class="child-header">
                <!-- 显示小朋友的基本信息，包括姓名、年龄和性别 -->
                <h2>小朋友姓名{{ child.name }} (性别:{{ child.gender }}, {{ child.birth_date }})</h2>
                <!-- 新增咨询AI助手按钮 -->
                <a href="{{ url_for('chatWithAI') }}" class="chat-ai-button">问AI</a>
            </div>
            <!-- 遍历该小朋友对应年龄的知识信息 -->
            {% for knowledge in knowledge_list %}
            <div class="knowledge-item">
                <!-- 显示养儿知识类别 -->
                <h3>{{ knowledge.name }}</h3>
                <!-- 显示该知识类别的描述 -->
                <p>{{ knowledge.description }}</p>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
    <!-- 按钮组，包含录入新小朋友信息和查看已有小朋友信息的链接 -->
    <div class="button-group">
        <!-- 录入新小朋友信息的链接，点击后跳转到相应路由 -->
        <a href="{{ url_for('add_child') }}">录入幼儿</a>
        <!-- 查看已有小朋友信息的链接，点击后跳转到相应路由 -->
        <a href="{{ url_for('view_children') }}">查看已录</a>
        <!-- 新增“常识”按钮 -->
        <a href="{{ url_for('common_sense') }}">育儿常识</a>
    </div>
</body>

</html>
